<template>
	<div class="px-[35px]">
		<base-icon
			name="back2"
			class="text-[20px] absolute left-3 top-3 cursor-pointer"
			@click="onBack" />
		<base-icon
			name="close"
			class="text-[20px] absolute right-3 top-3 cursor-pointer"
			@click="onClose" />
		<div class="mt-20 mb-9 app-font-bold text-center text-[20px]">{{ $t('reset.title') }}</div>
		<step-1 v-if="step === 1" @next="onNext" />
		<step-2 v-else-if="step === 2" @next="onNext" />
		<step-3 v-else @success="onClose" />
	</div>
</template>
<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { ref, provide, Ref } from 'vue'
import Step1 from './step-1.vue'
import Step2 from './step-2.vue'
import Step3 from './step-3.vue'
import { useAppStore, useAccountStore } from '@/store'
import { CodeType } from '@/enums'
import { CodeParams, AccountShowType } from '@/types'

const appStore = useAppStore()
const accountStore = useAccountStore()

const params: Ref<CodeParams> = ref({
	nameData: '',
	type: null,
	codeType: CodeType.resetPass,
	language: appStore.lang
})

provide<Ref<CodeParams>>('params', params)

const step = ref(1)

const onNext = (data: any) => {
	step.value++
	if (data) {
		params.value = { ...params.value, ...data }
	}
}

const onBack = () => {
	if (step.value === 1) {
		accountStore.showAccount(AccountShowType.login)
	} else {
		step.value = 1
	}
}

const onClose = () => accountStore.showAccount(AccountShowType.none)
</script>
